<template>
    <div class="text-center m-t-md">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="options.page"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="options.pageSize || 8"
                class="pagination"
                layout="total, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>

</template>

<script>
    export default {
        name: "pagination",
        props: {
            total: {
                type: Number,
                default: 0
            },
            options: {
                type: Object,
                default: () => {
                    return {
                        pageSize:8
                    }
                }
            }
        },
        methods: {
            handleSizeChange(size) {
                this.options.pageSize = size;
                this.change()
            },
            handleCurrentChange(index) {
                this.options.page = index;
                this.change()
            },
            change() {
                this.$emit('change', this.options)
            }

        }
    }
</script>

<style scoped>

</style>